<template>
	<div id="no-trans" class="no-trans upload-page-wrap">
		<div class="upload-page no-trans">
			<el-form label-position="top" class="upload-form">
				<!-- 足部问题图片上传 -->
				<section class="section diyige">
					<div class="section-title">
						足部问题图片上传 （“
						<span class="required">*</span>
						”必填项）
					</div>
					<div class="section-desc">支持 JPG、PNG 等常见图片格式</div>
					<el-row :gutter="10">
						<el-col :span="12" v-for="item in footProblemList" :key="item.label">
							<div class="upload-label">
								<span v-if="item.required" class="required">*</span>
								{{ item.label }}
							</div>
							<el-upload
								class="upload-box"
								action="#"
								:auto-upload="false"
								:show-file-list="false"
								:on-change="(file) => handleImageChange(item.key, file, item)"
								:ref="`upload_${item.key}`"
							>
								<img
									v-if="uploadedImages[item.key] && uploadedImages[item.key].url"
									:src="uploadedImages[item.key].file || uploadedImages[item.key].url || uploadedImages[item.key].url"
									alt="已上传图片"
									class="uploaded-image-no-overlay"
									@click.stop="handlePreviewImage(item.key, item)"
								/>
								<div v-else class="upload-placeholder" @click.stop="handleUploadBoxClick(item.key)" style="width: 100%; height: 100%">
									<i class="el-icon-plus upload-icon"></i>
									<div class="upload-text">添加图片</div>
								</div>
							</el-upload>
						</el-col>
					</el-row>
				</section>

				<!-- 原鞋垫测量图片上传 -->
				<section class="section">
					<div class="section-title">
						原鞋垫测量图片上传 （“
						<span class="required">*</span>
						”必填项）
					</div>
					<div class="section-desc">支持 JPG、PNG 等常见图片格式</div>
					<div class="section-desc">如果按鞋定制或定制鞋，上传鞋照片即可</div>
					<el-row :gutter="10">
						<el-col :span="12" v-for="item in insoleList" :key="item.label">
							<div class="upload-label">
								<span v-if="item.required" class="required">*</span>
								{{ item.label }}
							</div>
							<el-upload
								class="upload-box"
								action="#"
								:auto-upload="false"
								:show-file-list="false"
								:on-change="(file) => handleImageChange(item.key, file, item)"
								:ref="`upload_${item.key}`"
							>
								<img
									v-if="uploadedImages[item.key] && uploadedImages[item.key].url"
									:src="uploadedImages[item.key].file || uploadedImages[item.key].url"
									alt="已上传图片"
									class="uploaded-image-no-overlay"
									@click.stop="handlePreviewImage(item.key, item)"
									style="cursor: pointer"
								/>
								<div v-else class="upload-placeholder" @click.stop="handleUploadBoxClick(item.key)" style="width: 100%; height: 100%">
									<i class="el-icon-plus upload-icon"></i>
									<div class="upload-text">添加图片</div>
								</div>
							</el-upload>
						</el-col>
					</el-row>
				</section>

				<!-- 疼痛部位标识图片上传 -->
				<section class="section">
					<div class="section-title">疼痛部位标识图片上传（如有需要提供）</div>
					<div class="section-desc">支持 JPG、PNG 等常见图片格式</div>
					<el-row :gutter="10">
						<el-col :span="12" v-for="item in painList" :key="item.label">
							<div class="upload-label">
								<span v-if="item.required" class="required">*</span>
								{{ item.label }}
							</div>
							<el-upload
								class="upload-box"
								action="#"
								:auto-upload="false"
								:show-file-list="false"
								:on-change="(file) => handleImageChange(item.key, file, item)"
								:ref="`upload_${item.key}`"
							>
								<img
									v-if="uploadedImages[item.key] && uploadedImages[item.key].url"
									:src="uploadedImages[item.key].file || uploadedImages[item.key].url"
									alt="已上传图片"
									class="uploaded-image-no-overlay"
									@click.stop="handlePreviewImage(item.key, item)"
									style="cursor: pointer"
								/>
								<div v-else class="upload-placeholder" @click.stop="handleUploadBoxClick(item.key)" style="width: 100%; height: 100%">
									<i class="el-icon-plus upload-icon"></i>
									<div class="upload-text">添加图片</div>
								</div>
							</el-upload>
						</el-col>
					</el-row>
				</section>

				<!-- 踝部问题图片上传 -->
				<section class="section huanbu">
					<div class="section-title">
						腿部问题图片上传
						<!-- （"
						<span class="required">*</span>
						"必填项） -->

						(长短腿症状用户需提供)
					</div>
					<div class="section-desc">支持 JPG、PNG 等常见图片格式</div>
					<el-row :gutter="10">
						<el-col :span="12" v-for="item in ankleList" :key="item.label">
							<div class="upload-label">
								<span v-if="item.required" class="required">*</span>
								{{ item.label }}
							</div>
							<el-upload
								class="upload-box"
								action="#"
								:auto-upload="false"
								:show-file-list="false"
								:on-change="(file) => handleImageChange(item.key, file, item)"
								:ref="`upload_${item.key}`"
							>
								<img
									v-if="uploadedImages[item.key] && uploadedImages[item.key].url"
									:src="uploadedImages[item.key].file || uploadedImages[item.key].url"
									alt="已上传图片"
									class="uploaded-image-no-overlay"
									@click.stop="handlePreviewImage(item.key, item)"
								/>
								<div v-else class="upload-placeholder" @click.stop="handleUploadBoxClick(item.key)" style="width: 100%; height: 100%">
									<i class="el-icon-plus upload-icon"></i>
									<div class="upload-text">添加图片</div>
								</div>
							</el-upload>
						</el-col>
					</el-row>
				</section>

				<!-- 视频资料上传 -->
				<section class="section spsc">
					<div class="section-title">
						视频资料上传 （"
						<span class="required">*</span>
						"必填项）
					</div>
					<!-- <div class="section-desc">支持 MP4 视频格式，单个文件不超过100MB</div> -->
					<div class="section-desc">单个文件不超过100MB</div>

					<el-row :gutter="10" style="display: flex; flex-wrap: wrap">
						<el-col :span="12" v-for="item in videoList" :key="`${item.label}-${item.key}-${uploadedVideos[item.key]}`">
							<div class="upload-label">
								{{ item.label }}
								<span v-if="item.required" class="required">*</span>
							</div>

							<el-upload
								class="upload-box video-upload-box"
								action="#"
								:auto-upload="false"
								accept="video/*"
								:show-file-list="false"
								:on-change="(file) => handleVideoChange(item.key, file, item)"
								:key="uploadedVideos[item.key] && uploadedVideos[item.key].url ? uploadedVideos[item.key].url : item.key"
								:ref="`videoUpload_${item.key}`"
							>
								<div
									v-if="uploadedVideos[item.key] && uploadedVideos[item.key].status"
									class="uploaded-video"
									style="width: 100%; height: 100%"
									@click.stop="handlePreviewVideo(item.key)"
								>
									<video :src="uploadedVideos[item.key].url" controls />
									<div class="video-overlay">
										<i class="el-icon-video-play"></i>
									</div>
									<!-- 上传状态指示器 -->
									<div v-if="uploadedVideos[item.key].status === 'success'" class="upload-status success">
										<i class="el-icon-check"></i>
									</div>
									<div v-else-if="uploadedVideos[item.key].status === 'error'" class="upload-status error">
										<i class="el-icon-close"></i>
									</div>
									<div v-else-if="uploadedVideos[item.key].status === 'loading'" class="upload-status loading">
										<i class="el-icon-loading"></i>
									</div>
									<div v-if="uploadedVideos[item.key].status === 'error'" class="upload-error">上传失败</div>
								</div>
								<div v-else class="upload-placeholder video-placeholder" @click.stop="handleVideoUploadBoxClick(item.key)" style="width: 100%; height: 100%">
									<i class="el-icon-video-camera upload-icon"></i>
									<div class="upload-text">添加视频</div>
								</div>
							</el-upload>
						</el-col>
					</el-row>
				</section>
			</el-form>
		</div>
		<div class="footer-btn">
			<el-button :loading="save_load" type="warning" round size="large" class="save-btn" @click="handleSave">保存</el-button>
		</div>
		<!-- 视频预览弹窗 -->
		<el-dialog :visible.sync="previewVideoVisible" :modal-append-to-body="false" custom-class="video-preview-dialog preview-dialog no-trans" :show-close="true">
			<video :src="previewVideoUrl" controls style="width: 100%; display: block" />
			<div style="text-align: center; margin-top: 16px">
				<el-button class="no-trans reset-button" type="primary" @click="handleReuploadVideo">重新上传</el-button>
			</div>
			<input
				v-if="previewVideoKey"
				:ref="`reuploadVideoInput_${previewVideoKey}`"
				type="file"
				accept="video/mp4"
				style="display: none"
				@change="handleReuploadVideoInputChange"
			/>
		</el-dialog>
		<!-- 图片预览弹窗 -->
		<el-dialog :visible.sync="previewVisible" :modal-append-to-body="false" custom-class="image-preview-dialog preview-dialog no-trans" :show-close="true">
			<img :src="previewImageUrl" alt="图片预览" style="width: 100%; display: block" />
			<div style="text-align: center; margin-top: 16px">
				<el-button class="no-trans reset-button" type="primary" @click="handleReuploadImage">重新上传</el-button>
			</div>
			<!-- 隐藏的input[type=file]，用于重新上传 -->
			<input
				v-if="previewImageKey"
				:ref="`reuploadInput_${previewImageKey}`"
				type="file"
				accept="image/jpeg,image/png,image/gif"
				style="display: none"
				@change="handleReuploadInputChange"
			/>
		</el-dialog>
	</div>
</template>

<script>
import { api, uploadApi } from '@/store/axiosConfig';

function fileToBase64(file) {
	return new Promise((resolve, reject) => {
		const reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = () => resolve(reader.result);
		reader.onerror = (error) => reject(error);
	});
}

export default {
	name: 'H5Upload',
	data() {
		return {
			save_load: false,
			footProblemList: [
				{ label: '后跟力线', key: 'heel', required: true },
				{ label: '左脚内侧足弓', key: 'leftArch', required: true },
				{ label: '右脚内侧足弓', key: 'rightArch', required: true },
				{ label: '前足趾跖', key: 'forefoot', required: true },
				{ label: '体姿体态', key: 'posture', required: true },
				{ label: '客户人像面照-1', key: 'portrait1', required: true },
				{ label: '客户人像面照-2', key: 'portrait2', required: true },
				{ label: '客户人像面照-3', key: 'portrait3', required: true }
			],
			insoleList: [
				{ label: '原鞋垫-长', key: 'insoleLong', required: true },
				{ label: '原鞋垫-前掌宽', key: 'insoleFore', required: true },
				{ label: '原鞋垫-中间宽', key: 'insoleMid', required: true },
				{ label: '原鞋垫-后跟宽', key: 'insoleHeel', required: true }
			],
			painList: [
				{ label: '疼痛部位标识-1', key: 'pain1', required: false },
				{ label: '疼痛部位标识-2', key: 'pain2', required: false },
				{ label: '疼痛部位标识-3', key: 'pain3', required: false },
				{ label: '疼痛部位标识-4', key: 'pain4', required: false }
			],
			ankleList: [
				{ label: '长短腿-内踝对比', key: 'innerAnkle', required: false },
				{ label: '长短腿-膝盖前面对比', key: 'kneeFront', required: false },
				{ label: '长短腿-膝盖侧面对比', key: 'shortest', required: false },
				{ label: '长短腿-左腿长度', key: 'leftLong', required: false },
				{ label: '长短腿-右腿长度', key: 'rightLong', required: false },
				{ label: '长短腿-未干预前腘窝纹理', key: 'popliteal', required: false },
				{ label: '长短腿-踩楔形块后腘窝纹理', key: 'early', required: false },
				{ label: '长短腿-脊柱侧弯', key: 'spine', required: false }
			],
			videoList: [
				{ label: '步态分析', key: 'gait', required: true },
				{ label: '补充视频1', key: 'video_1', required: false },
				{ label: '补充视频2', key: 'video_2', required: false }
				// { label: '足部扫描', key: 'scan', required: true },
				// { label: '测试走路', key: 'walk', required: true },
				// { label: '足部模型', key: 'model', required: true },
				// { label: '压力分析', key: 'pressure', required: true },
				// { label: '姿态分析', key: 'posture', required: true }
			],
			uploadedImages: {}, // {key: {name, url}}
			uploadedVideos: {
				gait: {},
				video_1: {},
				video_2: {}
			}, // {key: {name, url}}
			user_id: '', // 需从登录或业务获取
			check_id: '', // 需从业务获取
			uploadingImages: {}, // 防止重复上传图片
			uploadingVideos: {}, // 防止重复上传视频
			// 新增图片预览相关
			previewVisible: false,
			previewImageUrl: '',
			previewImageKey: '',
			// 新增视频预览相关
			previewVideoVisible: false,
			previewVideoUrl: '',
			previewVideoKey: '',
			previewImageItem: {},
			imgArr: [],
			videoArr: []
		};
	},
	methods: {
		async handleImageChange(key, fileObj, item = {}) {
			console.log(key, fileObj, item, '-----------key, fileObj');
			// 防止重复上传
			if (this.uploadingImages[key]) {
				return;
			}

			const file = fileObj.raw;
			if (!/^image\/(jpeg|png|gif)$/.test(file.type)) {
				this.$message.error('仅支持jpg/png/gif格式图片');
				return;
			}
			if (file.size > 5 * 1024 * 1024) {
				this.$message.error('图片不能超过5MB');
				return;
			}

			// 设置上传状态
			this.$set(this.uploadingImages, key, true);

			try {
				const base64 = await fileToBase64(file);
				// 去掉文件后缀名
				const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, '');

				const res = await this.$api(
					'v1/upload/image',
					{
						image: base64,
						image_name: fileNameWithoutExt
					},
					'post'
				);
				console.log(res, res.data.data.image_url);
				if (res.code === 200) {
					this.$set(this.uploadedImages, key, { name: item.label, url: res.data.data.image_url, file: base64, type: 'img' });
				} else {
					this.$message.error(res.msg || '上传失败');
				}
			} catch (error) {
				this.$message.error('上传失败');
				console.error('上传图片失败:', error);
			} finally {
				// 清除上传状态
				this.$set(this.uploadingImages, key, false);
			}
		},
		async handleVideoChange(key, fileObj, item) {
			// 防止重复上传
			if (this.uploadingVideos[key]) {
				return;
			}

			const file = fileObj.raw;
			if (!/^video\/mp4$/.test(file.type)) {
				this.$message.error('仅支持mp4格式视频');
				return;
			}
			if (file.size > 50 * 1024 * 1024) {
				this.$message.error('视频不能超过50MB');
				return;
			}

			// 设置上传状态
			// this.$set(this.uploadedVideos, key, true);
			console.log(this.uploadedVideos, '--------------this.uploadedVideos');
			this.$set(this.uploadedVideos[key], 'status', 'loading');
			// 本地预览URL
			const localUrl = URL.createObjectURL(file);
			try {
				const base64 = await fileToBase64(file);
				// 去掉文件后缀名
				const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, '');
				const res = await this.$api(
					'v1/upload/video',
					{
						video: base64,
						video_name: fileNameWithoutExt
					},
					'post'
				);
				if (res.code === 200) {
					this.$set(this.uploadedVideos, key, { name: item.label, url: res.data.data.video_url, type: 'video', status: 'success' });
				} else {
					this.$set(this.uploadedVideos, key, { name: item.label, url: localUrl, status: 'error' });
					this.$message.error(res.msg || '上传失败');
				}
			} catch (error) {
				this.$set(this.uploadedVideos, key, { name: item.label, url: localUrl, status: 'error' });
				this.$message.error('上传失败');
				console.error('上传视频失败:', error);
			} finally {
				// 清除上传状态
				this.$set(this.uploadingVideos, key, false);
			}
		},
		async handleSave() {
			/* 1. 校验必填图片 */
			const requiredImages = [...this.footProblemList.filter((i) => i.required), ...this.insoleList.filter((i) => i.required), ...this.ankleList.filter((i) => i.required)];
			for (const item of requiredImages) {
				if (!this.uploadedImages[item.key] || !this.uploadedImages[item.key].url) {
					this.$message.error(`请上传${item.label}`);
					return;
				}
			}
			/* 2. 校验必填视频 */
			const requiredVideos = this.videoList.filter((i) => i.required);
			for (const item of requiredVideos) {
				if (!this.uploadedVideos[item.key] || !this.uploadedVideos[item.key].url) {
					this.$message.error(`请上传${item.label}视频`);
					return;
				}
			}
			const data = {
				user_id: this.$route.query.user_id,
				check_id: this.$route.query.check_id,
				// 下面字段名需与接口一一对应
				heel_force_line_img: this.uploadedImages.heel || {},
				left_foot_zugo_img: this.uploadedImages.leftArch || {},
				right_foot_zugo_img: this.uploadedImages.rightArch || {},
				forefoot_toes_img: this.uploadedImages.forefoot || {},
				body_posture_img: this.uploadedImages.posture || {},
				user_photo_1: this.uploadedImages.portrait1 || {},
				user_photo_2: this.uploadedImages.portrait2 || {},
				user_photo_3: this.uploadedImages.portrait3 || {},
				shoes_short_img: this.uploadedImages.insoleLong || {},
				shoes_insole_width_img: this.uploadedImages.insoleFore || {},
				shoes_mid_width_img: this.uploadedImages.insoleMid || {},
				shoes_rear_width_img: this.uploadedImages.insoleHeel || {},
				thickness_1_img: this.uploadedImages.pain1 || {},
				thickness_2_img: this.uploadedImages.pain2 || {},
				thickness_3_img: this.uploadedImages.pain3 || {},
				thickness_4_img: this.uploadedImages.pain4 || {},
				leg_length_discrepancy_img: this.uploadedImages.spine || {},
				leg_length_LLD_img: this.uploadedImages.early || {},
				leg_length_popliteal_img: this.uploadedImages.popliteal || {},
				leg_length_right_long_img: this.uploadedImages.rightLong || {},
				leg_length_left_long_img: this.uploadedImages.leftLong || {},
				leg_length_lateral_knee_img: this.uploadedImages.shortest || {},
				leg_length_knee_front_img: this.uploadedImages.kneeFront || {},
				leg_length_inner_ankle_img: this.uploadedImages.innerAnkle || {},
				// 视频
				butai_video: this.uploadedVideos.gait || {},
				foot_scan_video: this.uploadedVideos.scan || {},
				test_walk_video: this.uploadedVideos.walk || {},
				foot_model_video: this.uploadedVideos.model || {},
				pressure_analysis_video: this.uploadedVideos.pressure || {},
				posture_analysis_video: this.uploadedVideos.posture || {},
				video_1: this.uploadedVideos.video_1 || {},
				video_2: this.uploadedVideos.video_2 || {}
			};
			this.save_load = true;
			try {
				const res = await this.$api('user/photo_video/create', data, 'post');
				this.save_load = false;
				if (res.code === 200) {
					this.$message.success('保存成功');
					setTimeout(() => {
						history.back();
					}, 1500);
				} else {
					this.$message.error(res.msg || '保存失败');
				}
			} catch (error) {
				//TODO handle the exception
				this.save_load = false;
			}
		},
		// 新增：点击图片预览
		handlePreviewImage(key, item) {
			this.previewImageItem = item;
			this.previewImageKey = key;
			this.previewImageUrl = this.uploadedImages[key]?.file || this.uploadedImages[key]?.url || '';
			this.previewVisible = true;
		},
		// 新增：重新上传图片
		handleReuploadImage() {
			this.$nextTick(() => {
				const input = this.$refs[`reuploadInput_${this.previewImageKey}`];
				if (input) {
					(Array.isArray(input) ? input[0] : input).click();
				}
			});
		},
		// 新增：input change 事件
		async handleReuploadInputChange(e) {
			const file = e.target.files[0];
			if (file) {
				await this.handleImageChange(this.previewImageKey, { raw: file }, this.previewImageItem);
				// 关闭预览
				this.previewVisible = false;
			}
		},
		handleUploadBoxClick(key) {
			let uploadRef = this.$refs[`upload_${key}`];
			if (Array.isArray(uploadRef)) uploadRef = uploadRef[0];
			if (uploadRef && uploadRef.$el) {
				// 递归查找 input[type=file]
				function findInput(el) {
					if (!el) return null;
					if (el.tagName === 'INPUT' && el.type === 'file') return el;
					for (let child of el.children) {
						const found = findInput(child);
						if (found) return found;
					}
					return null;
				}
				const input = findInput(uploadRef.$el);
				if (input) input.click();
			}
		},
		// 视频预览弹窗
		handlePreviewVideo(key) {
			console.log('handlePreviewVideo called with key:', key);
			console.log('uploadedVideos:', this.uploadedVideos);
			console.log('video data for key:', this.uploadedVideos[key]);
			this.previewVideoKey = key;
			this.previewVideoUrl = this.uploadedVideos[key]?.url || '';
			this.previewVideoVisible = true;
			console.log('previewVideoVisible set to:', this.previewVideoVisible);
			console.log('previewVideoUrl set to:', this.previewVideoUrl);
		},
		handleReuploadVideo() {
			this.$nextTick(() => {
				const input = this.$refs[`reuploadVideoInput_${this.previewVideoKey}`];
				if (input) {
					(Array.isArray(input) ? input[0] : input).click();
				}
			});
		},
		async handleReuploadVideoInputChange(e) {
			const file = e.target.files[0];
			if (file) {
				await this.handleVideoChange(this.previewVideoKey, { raw: file });
				this.previewVideoVisible = false;
			}
		},
		handleVideoUploadBoxClick(key) {
			let uploadRef = this.$refs[`videoUpload_${key}`];
			if (Array.isArray(uploadRef)) uploadRef = uploadRef[0];
			if (uploadRef && uploadRef.$el) {
				// 递归查找 input[type=file]
				function findInput(el) {
					if (!el) return null;
					if (el.tagName === 'INPUT' && el.type === 'file') return el;
					for (let child of el.children) {
						const found = findInput(child);
						if (found) return found;
					}
					return null;
				}
				const input = findInput(uploadRef.$el);
				if (input) input.click();
			}
		},
		// 获取URL参数
		getUrlParams() {
			const urlParams = new URLSearchParams(window.location.search);
			const userId = urlParams.get('user_id');
			const checkId = urlParams.get('check_id');

			if (userId) {
				this.user_id = userId;
				console.log('获取到user_id:', userId);
			} else {
				console.warn('未找到user_id参数');
			}

			if (checkId) {
				this.check_id = checkId;
				console.log('获取到check_id:', checkId);
			} else {
				console.warn('未找到check_id参数');
			}
		},
		getVideoAndImg() {
			this.$api('check/user_photo_video/info', { check_id: this.$route.query.check_id }, 'post').then((res) => {
				if (res.code == 200) {
					let data = res.data;
					let imgKeyMap = {
						heel_force_line_img: 'heel',
						left_foot_zugo_img: 'leftArch',
						right_foot_zugo_img: 'rightArch',
						forefoot_toes_img: 'forefoot',
						body_posture_img: 'posture',
						user_photo_1: 'portrait1',
						user_photo_2: 'portrait2',
						user_photo_3: 'portrait3',
						shoes_short_img: 'insoleLong',
						shoes_insole_width_img: 'insoleFore',
						shoes_mid_width_img: 'insoleMid',
						shoes_rear_width_img: 'insoleHeel',
						thickness_1_img: 'pain1',
						thickness_2_img: 'pain2',
						thickness_3_img: 'pain3',
						thickness_4_img: 'pain4',
						leg_length_discrepancy_img: 'spine',
						leg_length_LLD_img: 'early',
						leg_length_popliteal_img: 'popliteal',
						leg_length_right_long_img: 'rightLong',
						leg_length_left_long_img: 'leftLong',
						leg_length_lateral_knee_img: 'shortest',
						leg_length_knee_front_img: 'kneeFront',
						leg_length_inner_ankle_img: 'innerAnkle'
					};
					let videoKeyMap = {
						// 视频
						butai_video: 'gait',
						foot_scan_video: 'scan',
						test_walk_video: 'walk',
						foot_model_video: 'model',
						pressure_analysis_video: 'pressure',
						posture_analysis_video: 'posture',
						video_1: 'video_1',
						video_2: 'video_2'
					};
					for (const key in data) {
						let value = data[key];
						if (value !== null && typeof value === 'object') {
							// 判断是否有值
							// if (value.name && value.url && value.type) {
							if (value.type == 'img') {
								this.$set(this.uploadedImages, imgKeyMap[key], { ...value, status: 'success' });
							} else if (value.type == 'video') {
								this.$set(this.uploadedVideos, videoKeyMap[key], { ...value, status: 'success' });
							}
							// }
						}
					}

					console.log(this.uploadedImages, '---------this.uploadedImages');
					console.log(this.uploadedVideos, '---------this.uploadedVideos');
				}
			});
		}
	},
	mounted() {
		document.body.style.background = '#F3F3F3';

		// 获取URL参数
		this.getUrlParams();
		this.getVideoAndImg();
	},
	beforeDestroy() {
		document.body.style.background = '';
	}
};
</script>
<style lang="less">
.el-message {
	top: 40% !important;
	width: 90%;
	height: 60px;
	box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
	padding: 0 14px;
	border-radius: 8px;
	.el-message__icon {
		font-size: 20px;
		margin-right: 6px;
	}
	.el-message__content {
		font-size: 20px;
	}
	.el-message--error {
	}
}
</style>
<style lang="less" scoped>
/deep/.el-dialog {
	.el-dialog__header {
		padding: 10px;
		.el-dialog__headerbtn {
			.el-dialog__close {
				font-size: 24px;
				font-weight: 600;
				color: #000;
			}
		}
	}
}
.reset-button {
	width: 100% !important;
	height: 40px !important;
	font-size: 16px;
}
/* px-to-viewport-ignore */
.upload-page-wrap {
	padding-bottom: 20px;
}

/* px-to-viewport-ignore-next */
.upload-page {
	max-width: 375px;
	margin: 10px auto 0 auto;
	min-height: 100vh;
	background: #f7f7f7;

	font-family: 'PingFang SC', 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
}

/* px-to-viewport-ignore-next */
.diyige {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

/* px-to-viewport-ignore-next */
.huanbu {
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}

/* px-to-viewport-ignore-next */
.spsc {
	margin-bottom: 10px;
	border-radius: 16px;
	margin-top: 20px;
}

/* px-to-viewport-ignore-next */
.upload-page .upload-form {
	background: #f3f3f3;
	border-radius: 16px;
	/* padding: 18px 16px 8px 16px; */
	/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); */
}

.upload-page .section {
	/* margin-bottom: 28px; */
	background: #fff;
	padding: 18px 16px 8px 16px;
}

.upload-page .section-title {
	font-weight: 600;
	font-size: 16px;
	color: #222;
	margin-bottom: 2px;
	line-height: 1.2;
}

.upload-page .section-desc {
	color: #b0b0b0;
	font-size: 12px;
	margin-bottom: 12px;
	line-height: 1.2;
}

.upload-page .upload-label {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #333;
	margin-bottom: 6px;
	font-weight: 500;
	text-align: center;
	text-align: left;
	line-height: 1;
}

.upload-page .required {
	color: #ff6600;
	margin-left: 2px;
	font-size: 15px;
	line-height: 1;
}

.upload-page .upload-box {
	width: 100%;
	height: 92px;
	min-height: 92px;
	max-height: 92px;
	border: 1.5px dashed #e5e5e5;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fafbfc;
	margin-bottom: 10px;
	transition: border-color 0.2s;
	position: relative;
	overflow: hidden;
	/deep/.el-upload{
		width: 100%;
	}
}

.upload-page .el-upload {
	width: 100%;
	height: 100%;
	min-height: 92px;
	max-height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.upload-page .upload-box:hover {
	/* border-color: #ff9900; */
}

.upload-page .upload-icon {
	font-size: 32px;
	color: #ff9900;
	margin-bottom: 4px;
}

.upload-page .upload-text {
	font-size: 12px;
	color: #b0b0b0;
}

/* 图片回显样式（无悬浮层） */
.upload-page .uploaded-image-no-overlay {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	display: block;
	cursor: pointer;
}

/* 视频回显样式 */
.upload-page .uploaded-video {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
}

.upload-page .uploaded-video video {
	flex:1;
	width: 100%;
	height: 100%;
	max-height: 92px;
	object-fit: cover;
	border-radius: 12px;
	cursor: pointer;
}

/* 上传占位符样式 */
.upload-page .upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 92px;
	max-height: 92px;
}

.footer-btn {
	text-align: center;
	margin: 20px 0 10px 0;
}

.save-btn {
	margin: 0 auto;
	width: 90%;
	height: 44px;
	background: linear-gradient(90deg, #ff6600 0%, #ff9900 100%) !important;
	color: #fff !important;
	font-size: 18px;
	font-weight: 600;
	border: none !important;
	border-radius: 22px !important;
	box-shadow: 0 2px 8px rgba(255, 153, 0, 0.08);
	letter-spacing: 2px;
}

.save-btn:active {
	background: linear-gradient(90deg, #ff6600 0%, #ff9900 100%) !important;
}

.upload-page .el-form {
	margin-bottom: 0 !important;
}

.upload-page .el-row {
	margin-left: -4px !important;
	margin-right: -4px !important;
}

.upload-page .el-col {
	padding-left: 4px !important;
	padding-right: 4px !important;
	margin-bottom: 8px !important;
}

.upload-page .el-upload .el-icon-plus,
.upload-page .el-upload .el-icon-video-camera {
	font-size: 32px !important;
	color: #ff9900 !important;
	margin-bottom: 4px !important;
}

@media (max-width: 375px) {
	.upload-page {
		max-width: 100vw;
		padding-left: 0;
		padding-right: 0;
	}
}
/deep/.preview-dialog {
	margin-top: 15px !important;
	width: 95%;
}
/* 视频预览弹窗样式 */
.video-preview-dialog {
	border-radius: 12px;
}

.video-preview-dialog .el-dialog__body {
	padding: 20px;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	// background: rgba(0, 0, 0, 0.5);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-overlay i {
	font-size: 32px;
	color: #fff;
}

.upload-error {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(255, 0, 0, 0.7);
	color: #fff;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 0 0 12px 12px;
	text-align: center;
}

/* 视频上传专用样式 */
.video-upload-box {
	border: 2px dashed #e5e5e5;
	transition: all 0.3s ease;
}

.video-upload-box:hover {
	/* border-color: #ff9900; */
	box-shadow: 0 4px 12px rgba(255, 153, 0, 0.15);
}

.video-placeholder {
	/* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
}

.video-placeholder:hover {
	/* background: linear-gradient(135deg, #fff5e6 0%, #ffeaa7 100%); */
}

.uploaded-video {
	position: relative;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.uploaded-video:hover {
	transform: scale(1.02);
}

.uploaded-video:hover .video-overlay {
	background: rgba(0, 0, 0, 0.3);
}

.uploaded-video:hover .video-overlay i {
	transform: scale(1.1);
}

.video-overlay i {
	transition: transform 0.2s ease;
}

/* 上传状态指示器 */
.upload-status {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #fff;
}

.upload-status.success {
	background: #52c41a;
}

.upload-status.error {
	background: #ff4d4f;
}

.upload-status.loading {
	background: #1890ff;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
